<template>
  <div class="evaluation">
    <stu-breadcrumb style="width: 96%;margin: 10px auto;" />
    <div class="evaluation_bor">
      <div class="eval_top">
        <div class="top_box">
          <div class="topbox_left_maiin">
            <div class="tboxl_main_one">
              <h3>征信报告</h3>
              <div class="tboxl_main_one_zxbg">
                <dl>
                  <dd>个人征信报告</dd>
                  <dd class="grzxbg_baglen">
                    <span class="grzxbg_baglen_span" :style="{ 'width': ZXData.personalCreditReportCount + '%' }"></span>
                    <i class="grzxbg_baglen_i">{{ ZXData.personalCreditReportCount }}</i>
                  </dd>
                </dl>
                <dl>
                  <dd>企业征信报告</dd>
                  <dd class="grzxbg_baglen">
                    <span class="grzxbg_baglen_span"
                      :style="{ 'width': ZXData.enterpriseCreditReportCount + '%' }"></span>
                    <i class="grzxbg_baglen_i">{{ ZXData.enterpriseCreditReportCount }}</i>
                  </dd>
                </dl>
              </div>
            </div>
            <div class="tboxl_main_one">
              <h3>评分模型</h3>
              <div class="tboxl_main_one_pfmx">
                <dl>
                  <dd class="tboxlhide_title">个人市场化征信评分模型</dd>
                  <dd class="pfmx_baglen">
                    <span class="pfmx_baglen_span"
                      :style="{ 'width': ZXData.personalCreditRatingModelCount + '%' }"></span>
                    <i class="pfmx_baglen_i"> {{ ZXData.personalCreditRatingModelCount }}</i>
                  </dd>
                </dl>
                <dl>
                  <dd class="tboxlhide_title">企业市场化征信评分模型</dd>
                  <dd class="pfmx_baglen">
                    <span class="pfmx_baglen_span"
                      :style="{ 'width': ZXData.enterpriseCreditRatingModelCount + '%' }"></span>
                    <i class="pfmx_baglen_i"> {{ ZXData.enterpriseCreditRatingModelCount }}</i>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
          <div class="topbox_right_title">征信大数据</div>
        </div>
        <div class="top_box">
          <div class="topbox_left_maiin">
            <div id="cl_model" class="cl_model" v-if="IsUnmount"></div>
          </div>
          <div class="topbox_right_title">大数据金融监管</div>
        </div>
        <div class="top_box">
          <div class="topbox_left_maiin">
            <div class="big_toplen">
              <h3>采集文件</h3>
              <div class="big_cjwj" id="big_cjwj" v-if="IsUnmount"></div>
            </div>
            <div class="big_bottombie" id="big_bottombie" v-if="IsUnmount"></div>
          </div>
          <div class="topbox_right_title">大数据处理</div>
        </div>
        <div class="top_box top_boxs">
          <div class="topbox_left_maiin top_boxs_main">
            <div class="zqbox_left">
              <div class="zqboxle_top" id="zqboxle_top" v-if="IsUnmount"></div>
              <div class="zqboxle_btm" id="zqboxle_btm" v-if="IsUnmount"></div>
            </div>
            <div class="zqbox_right">
              <div class="zqboxpie_top" id="zqboxpie_top" v-if="IsUnmount"></div>
              <div class="zqboxlepie_btm" id="zqboxlepie_btm" v-if="IsUnmount"></div>
            </div>
          </div>
          <div class="topbox_right_title">证券大数据</div>
        </div>
      </div>
      <div class="eval_bottom">
        <div class="btmbox_left">
          <div class="btboxlft_left">
            <div class="btboxleft__top">
              <div class="__left1_box" id="biggyl__1" v-if="IsUnmount"></div>
              <div class="__left2_box" id="biggyl__2" v-if="IsUnmount"></div>
            </div>
            <div class="btboxleft__top">
              <div class="__left1_box" id="biggyl__3" v-if="IsUnmount"></div>
              <div class="__left2_box biggyl__4">
                <div class="biggyl__4_btmbag">
                  <div class="biggyl__4_1" id="biggyl__4_1" v-if="IsUnmount"></div>
                  <div class="biggyl__4_1" id="biggyl__4_2" v-if="IsUnmount"></div>
                </div>

              </div>
            </div>
          </div>
          <div class="btboxlft_title">大数据供应链金融</div>
        </div>
        <div class="btmbox_right">
          <div class="btmrith_top">
            <div class="btmrith_top_r">
              <div class="tomr_r1">
                <div class="tomr_r11" id="tomr_r1_1" v-if="IsUnmount"></div>
                <div class="tomr_r11" id="tomr_r1_2" v-if="IsUnmount"></div>
                <div class="tomr_r11" id="tomr_r1_3" v-if="IsUnmount"></div>
              </div>
              <div class="tomr_r2" id="tomr_r2" v-if="IsUnmount"></div>
              <div class="tomr_r3">
                <div class="tomr_r3_left">
                  <div class="tomrl_s01">
                    <ul>车险定价模型</ul>
                    <ul class="tomrl_s01len _s01len_li_s01">
                      <li class="tomrl_s01len_li" :title="CharMOdel + '个'" :style="{ 'width': (CharMOdel * 2) + '%' }">
                      </li>
                      <li class="tomrl_s01len_text">{{ CharMOdel }}</li>
                    </ul>
                  </div>
                  <div class="tomrl_s01">
                    <ul>客户群</ul>
                    <ul class="tomrl_s01len _s01len_li_s02">
                      <li class="tomrl_s01len_li" :title="CustomerBase + '个'"
                        :style="{ 'width': (CustomerBase * 2) + '%' }"></li>
                      <li class="tomrl_s01len_text">{{ CustomerBase }}</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="btmrith_top_title">
              保险大数据
            </div>
          </div>
          <div class="btmrith_btm">
            <div class="btmrith_top_r">
              <div class="btmr_r1">
                <div class="btmrr1_top">
                  <!-- <p>接口分享</p> -->
                  <div class="btmrr1_top_box" id="btmrr1_top_box">
                    <!-- <div class="btmrr1_top1s">
                      <ul class="btmrr1_top1s1">
                        <li class="btmrr1_top1s1_len1"></li>
                        <li class="btmrr1_top1s1_text">60%</li>
                      </ul>
                    </div>
                    <div class="btmrr1_top1s">
                      <ul class="btmrr1_top1s2">
                        <li class="btmrr1_top1s1_len2"></li>
                        <li class="btmrr1_top1s1_text">60%</li>
                      </ul>
                    </div> -->
                  </div>
                </div>


                <!-- <div class="btmrr1_tom"></div> -->
              </div>
              <div class="btmr_r2" id="btmrr1_tom" v-if="IsUnmount"></div>
              <div class="btmr_r3" id="btmr_r3" v-if="IsUnmount"></div>
            </div>
            <div class="btmrith_top_title">
              银行大数据
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useHooks } from "./hooks";
const {
  ZXData,
  IsUnmount,
  CharMOdel,
  CustomerBase
} = useHooks();
import StuBreadcrumb from "@/components/StuBreadcrumb/index.vue";
</script>

<style scoped lang="scss">
@import url(@/style/monitoring_center.scss);
</style>
